<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Quick Server Tests</title>
<script type="text/javascript" src="assets/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="assets/main.js"></script>
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<h1>Quick Server Tests</h1>

<div class="widget">
    <h3>Connect to Quick Server and Login</h3>
    <label>Server&nbsp;&nbsp;&nbsp;:</label>
    <input type="text" id="input_server_addr" value="ws://192.168.56.101:8088/test" />
    &nbsp;
    <input type="button" value="Connect" onclick="return test.connect($('#input_server_addr').val(), $('#input_username').val());" />
    <input type="button" value="Disconnect" onclick="return test.disconnect();" />
    <br />
    <label>Username&nbsp;:</label>
    <input type="text" id="input_username" value="" />
    &nbsp;
    <input type="button" value="Login" onclick="return test.login($('#input_username').val());" />
</div>

<div class="widget">
    <h3>Test: Hello World</h3>
    <input type="button" value="Say Hello" onclick="return test.call_action('helloworld.sayhello');" />
    <input type="button" value="Say HI" onclick="return test.call_action('helloworld.sayhi');" />
</div>

<div class="widget">
    <h3>Test: Chatroom</h3>
    <label>Message&nbsp;&nbsp;:</label>
    <input type="text" id="input_message" value="" />
    <br />
    <input type="button" value="Send" onclick="return test.send_message($('#input_message').val());" />
</div>

<div id="logs">
    <ul id="log"></ul>
    <input type="button" value="Insert Mark" onclick="return log.add_mark();" />
    &nbsp;&nbsp;
    <input type="button" value="Clear" onclick="return log.clear();" />
</div>

</body>
</html>
